<template>
    <div>
        <oe-table-builder height="100vh" :config="data1" :data="data1Test" main-active-name="component">
            <template v-slot:mainTabBeforeDefault>
                <el-tab-pane label="组件说明" name="component">
                    <el-scrollbar class="config-scrollbar">
                        <h1>Outlier-table-builder 复杂填报表格构建器</h1>
                        <el-divider></el-divider>
                        <h2>使用样例</h2>
                        <div>
                           <el-card shadow="hover" style="margin-bottom: 10px">
                               <h3>￡ 完整功能的构造器使用</h3>
                               {{ '<oe-table-builder height="400px" :config="data1" :data="data1Test"></oe-table-builder>' }}
                               <el-divider></el-divider>
                               <el-row>
                                   <el-col :span="24">
                                       <oe-table-builder height="400px" :config="data1" :data="data1Test"></oe-table-builder>
                                   </el-col>
                               </el-row>
                           </el-card>
                           <el-card shadow="hover" style="margin-bottom: 10px">
                               <h3>￡ 仅预览功能</h3>
                               {{ '<oe-table-preview :config="data1" :data="data1Test"></oe-table-preview>' }}
                               <el-divider></el-divider>
                               <el-row>
                                   <el-scrollbar style="height: 400px">
                                       <oe-table-preview :config="data1" :data="data1Test"></oe-table-preview>
                                   </el-scrollbar>
                               </el-row>
                           </el-card>
                        </div>
                        <el-divider></el-divider>
                        <h2>核心构造器 oe-table-builder</h2>
                        <div>
                            <h3>￡ Attributes</h3>
                            <el-table :data="tableData.Attributes" border size="mini" default-expand-all row-key="id">
                                <el-table-column prop="attr" label="参数" width="200"></el-table-column>
                                <el-table-column prop="info" label="说明" min-width="180"></el-table-column>
                                <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
                                <el-table-column prop="select" label="可选值" min-width="200" align="center"></el-table-column>
                                <el-table-column prop="default" label="默认值" width="200" align="center"></el-table-column>
                            </el-table>
                            <h3>￡ Slot</h3>
                            <el-table :data="tableData.Slot" row-key="id" border size="mini" default-expand-all>
                                <el-table-column prop="attr" label="参数" width="200" align="center"></el-table-column>
                                <el-table-column prop="info" label="说明" min-width="180"></el-table-column>
                                <el-table-column prop="params" label="携带参数" min-width="180"></el-table-column>
                            </el-table>
                        </div>
                        <el-divider></el-divider>
                        <h2>表格预览 oe-table-preview</h2>
                        <div>
                            <h3>￡ Attributes</h3>
                            <el-table :data="previewTableData.Attributes" border size="mini" default-expand-all row-key="id">
                                <el-table-column prop="attr" label="参数" width="200"></el-table-column>
                                <el-table-column prop="info" label="说明" min-width="180"></el-table-column>
                                <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
                                <el-table-column prop="select" label="可选值" min-width="200" align="center"></el-table-column>
                                <el-table-column prop="default" label="默认值" width="200" align="center"></el-table-column>
                            </el-table>
                        </div>
                        <el-divider></el-divider>
                        <div>
                            <h2>￡ 更新日志</h2>
                            <el-scrollbar style="height: 400px">
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item>
                                        <el-tag effect="dark" size="mini">v 0.0.3</el-tag> <span style="color: #999999">2021年12月13日</span>
                                        <li>新增表格预览功能</li>
                                        <li>完善使用说明文档</li>
                                    </el-timeline-item>
                                </el-timeline>
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item>
                                        <el-tag effect="dark" size="mini">v 0.0.2</el-tag> <span style="color: #999999">2021年12月12日</span>
                                        <li>第一版测试版</li>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-scrollbar>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </template>
        </oe-table-builder>
    </div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';

    const data1 = require('./data/data1.json');
    const data1Test = require('./data/data1-test.json');

    export default defineComponent({
        name: 'App',
        components: {},
        data() {
            return {
                data1,
                data1Test,
                tableData: {
                    Attributes: [{
                        id: '1',
                        attr: 'height',
                        info: '主构建器高度',
                        type: 'string',
                        select: '—',
                        default: '—'
                    }, {
                        id: '2',
                        attr: 'main-active-name',
                        info: '默认选中的页签，即 el-tab-pane 的 name 值',
                        type: 'string',
                        select: 'tableDraw | attr | tablePreview | form | json | 插槽自定义页签',
                        default: 'attr'
                    }, {
                        id: '3',
                        attr: 'config',
                        info: '当前构造器最终生成的完整JSON对象',
                        type: 'object',
                        select: '—',
                        default: '—'
                    }, {
                        id: '4',
                        attr: 'data',
                        info: '当前表格所填写的内容',
                        type: 'object',
                        select: '—',
                        default: '—',
                        children: [{
                            id: '4-1',
                            attr: 'data',
                            info: '基础的数据属性值',
                            type: 'object',
                            select: '—',
                            default: '—'
                        }, {
                            id: '4-2',
                            attr: 'dataset',
                            info: '数据集合的数据列表',
                            type: 'object',
                            select: '—',
                            default: '—'
                        }]
                    }],
                    Slot: [
                        {attr: 'mainTabBeforeDefault', info: '构造器TAB左侧添加自定义标签页，注意需使用 el-tab-pane', params: '—'},
                    ]
                },
                previewTableData: {
                    Attributes: [{
                        id: '1',
                        attr: 'config',
                        info: '当前构造器最终生成的完整JSON对象',
                        type: 'object',
                        select: '—',
                        default: '—'
                    }, {
                        id: '2',
                        attr: 'data',
                        info: '当前表格所填写的内容',
                        type: 'object',
                        select: '—',
                        default: '—',
                        children: [{
                            id: '2-1',
                            attr: 'data',
                            info: '基础的数据属性值',
                            type: 'object',
                            select: '—',
                            default: '—'
                        }, {
                            id: '2-2',
                            attr: 'dataset',
                            info: '数据集合的数据列表',
                            type: 'object',
                            select: '—',
                            default: '—'
                        }]
                    }],
                }
            }
        }
    });
</script>

<style lang="scss">
    body {
        margin: 0;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin: 0;
        padding: 0;
    }
</style>
